<template>
  <div class="map-list">
    <Menus title="机构查询" :home="true" />
    <ul>
      <li v-for="(item,index) in maps" :key="'key-map-list-'+index">
        <router-link :to="item.link" :style="'background:'+item.color">{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import Menus from '@/components/Menu'
import maps from '@/datas/maplist'
import api from '@/datas/api'
// import axios from 'axios'

export default {
  data() {
    return {
      maps
    }
  },
  methods: {
    async loadList(diagramId) {
      this.childList = 0
      const res = await this.$get(api.list + diagramId, this)
      this.list = res.result.items
    }
  },
  async mounted() {},
  components: {
    Menus
  }
}
</script>
<style lang="scss">
.map-list {
  padding: 1.6rem 0 2rem;
  background: #fff;
  min-height: 100vh;
  ul {
    width: 12rem;
    margin: 0.55rem auto 0;
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 33.33%;
      a {
        color: #fff;
        display: block;
        margin: 0 0.2rem 0.4rem;
        height: 1.8rem;
        line-height: 1.8rem;
        background: #ff6700;
        border-radius: 0.1rem;
        text-align: center;
        font-size: 0.32rem;
      }
    }
  }
}
@media screen and (orientation: portrait) {
  .map-list {
    ul {
      width: 100%;
      li {
        width: 50%;
      }
    }
  }
}
@media screen and (orientation: landscape) {
}
</style>
